<template>
	<view class="main-cont box box-tb box-pack-start box-align-center u-skeleton">
		<u-sticky>
			<view class="sticky">
				<view class="list box box-align-center box-pack-start u-skeleton-fillet">
					<!-- <u-input v-model="search" type="text" :border="border" :custom-style="customStyle" @change="handleChange()"
						placeholder="搜索学校" />
					<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="goSearch">
						<u-loading></u-loading>
					</u-image> -->
					<u-search placeholder="搜索学校" @change="handleChange()" v-model="search"></u-search>
				</view>
			</view>
		</u-sticky>
		<view class="padd20 school">
			<view class="items u-skeleton-rect" v-for="(item,index) in page.list" :key="index"
				@click="selectSchool(item)">
				{{item.name}}
			</view>
		</view>
		<u-loadmore :status="status" :margin-bottom="30" @loadmore="downRefresh" :load-text="loadText" />
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import { debounce } from "@/common/utils.js";
	export default {
		data() {
			return {
				search: "",
				customStyle: {
					width: "560rpx",
					padding: "40rpx",
					color: "#000"
				},
				page: {
					total: 0,
					pageSize: 10,
					pageNum: 1,
					list: []
				},
				loading: true, // 是否显示骨架屏组件
				status: 'loadmore',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多数据'
				},
				timer: null
			}
		},
		onLoad() {
			//console.log('加载');
			this.goSearch()
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.page.pageSize = 10
			this.goSearch()
		},
		// 触底的事件
		onReachBottom() {
			this.downRefresh()
		},
		methods: {
			handleChange() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.goSearch()
				}, 1000)
				// debounce(this.goSearch(),1000)
			},
			goSearch() {
				this.status = 'loading'
				let params = {
					searchText: this.search,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				}
				this.$api.post({
					url: '/yschool/pageSchoollist'
				}, params).then(res => {
					if (res.code == 0) {
						this.page = res.list;
						this.loading = false
						if (this.page.pageSize >= this.page.total) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}
				})
			},
			selectSchool(data) {
				uni.navigateTo({
					url: `/team/register/createClass?id=${data.id}&name=${data.name}`
				})
			},
			downRefresh() {
				//console.log('触底的事件');
				const data = this.page
				if (data.pageSize >= data.total) {
					this.status = 'nomore'
					return
				} else {
					this.page.pageSize += 10
					this.status = 'loadmore';
					this.goSearch()
				}

			}
		}
	}
</script>

<style scoped lang='scss'>
	.main-cont {
		width: 100%;
		height: 100%;
	}

	.list {
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}

	.school {
		width: 100%;
	}

	.items {
		width: 100%;
		height: 95rpx;
		line-height: 95rpx;
		color: #2F3142;
		font-size: 30rpx;
		text-align: left;
	}
</style>
